<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天天商城用户注册</title>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!--    <script src="bootstrap/js/bootstrap.min.js"></script>-->
    <!--    <script src="js/HttpUtil.js"></script>-->
    <script src="js/CacheUtil.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: #ffffff;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 550px;
            background-color: #A9A9A9;
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            color: azure;
        }

        .sexDiv > input,
        .hobby > input {
            width: 30px;
            height: 17px;
        }

        input,
        select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        .introduce > textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
            color: #f0edf3;
        }

        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
    </style>
</head>

<body>
<div id="loginDiv">
    <form name="my_form">
        <h1>用户注册</h1>

        <p>用户姓名:<input id="userName" type="text" ><label id="name_trip" /></p>

        <p>用户密码:<input id="password" name="psw1" type="password" required /></p>

        <p>确认密码:<input id="surePassword" name="psw2" type="password" required></label></p>

        <p>电话号码:<input id="phone" type="phone" required><label id="phone_trip"></label></p>

        <p>电子邮件:<input id="email" type="email" required><label id="emil_trip"></label></p>


        <p style="margin-top:40px">
            <input type="button" class="button" onclick="submitRegister()" value="提交">
            <input type="reset" class="button" value="重置">
        </p>
    </form>
</div>

</body>
<script>


    function submitRegister() {
        let url = "user/register";
        url = "/shop-api/" + url;

        let userName = $("#userName").val();
        console.log(userName);
        if (userName==""){
            alert("请输入用户名");
            location.href="userRegister.html";
            return;
        }

        let password = $("#password").val();
        if (password==""){
            alert("请输入用户密码");
            location.href="userRegister.html";
            return;
        }

        let psw1 = $("#password").val();
        let psw2 = $("#surePassword").val();
        if (psw1 != psw2) {
            alert("密码确认有误");
            location.href="userRegister.html";
            return;
        }

        let params = {
            userName: $("#userName").val(),
            password: $("#password").val(),
            phone: $("#phone").val(),
            email: $("#email").val()
        };


        $.ajax({
                url: url,
                data: JSON.stringify(params),
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    console.log(data);
                    console.log(data.code);

                    if (data.code == 0) {
                        alert("注册成功");
                        location.href = "Login.html";
                    } else {
                        alert(data.message);
                    }
                }
            })
    }


</script>


</html>